// 模拟文章数据
const articles = [
    {
        id: 1,
        title: "Tailwind CSS 入门指南",
        summary: "Tailwind CSS 是一个功能优先的 CSS 框架，它提供了一系列原子化的 CSS 类，让我们可以快速构建现代化的用户界面。",
        content: "Tailwind CSS 是一个功能优先的 CSS 框架，它提供了一系列原子化的 CSS 类，让我们可以快速构建现代化的用户界面。与传统的 CSS 框架不同，Tailwind 不提供预设的组件样式，而是提供了一系列低级别的工具类，让我们可以自由组合来构建独特的设计。",
        image: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&h=400&fit=crop",
        tags: ["CSS", "前端", "Tailwind"],
        date: "2024-01-15",
        readTime: "5分钟"
    },
    {
        id: 2,
        title: "JavaScript 异步编程详解",
        summary: "深入理解 JavaScript 中的异步编程概念，包括 Promise、async/await 等现代异步处理方式。",
        content: "JavaScript 的异步编程是前端开发中的重要概念。从回调函数到 Promise，再到 async/await，异步处理方式不断演进，让代码更加清晰易读。本文将详细介绍这些概念的使用场景和最佳实践。",
        image: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&h=400&fit=crop",
        tags: ["JavaScript", "异步编程", "Promise"],
        date: "2024-01-12",
        readTime: "8分钟"
    },
    {
        id: 3,
        title: "响应式设计最佳实践",
        summary: "探讨现代响应式设计的核心原则和技巧，确保网站在各种设备上都能提供良好的用户体验。",
        content: "响应式设计不仅仅是让网站在不同屏幕尺寸上看起来不错，更重要的是提供一致的用户体验。本文将分享一些实用的响应式设计技巧，包括灵活的网格系统、图片优化、触摸友好的交互设计等。",
        image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=400&fit=crop",
        tags: ["响应式设计", "CSS", "移动端"],
        date: "2024-01-10",
        readTime: "6分钟"
    },
    {
        id: 4,
        title: "Vue 3 组合式 API 详解",
        summary: "Vue 3 引入的组合式 API 为组件逻辑复用提供了更优雅的解决方案，本文将深入探讨其使用方法和最佳实践。",
        content: "Vue 3 的组合式 API 是一个重大的架构改进，它让我们能够以更灵活的方式组织组件逻辑。通过 Composition API，我们可以更好地复用逻辑、组织代码，并提高代码的可维护性。",
        image: "https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=800&h=400&fit=crop",
        tags: ["Vue", "前端框架", "JavaScript"],
        date: "2024-01-08",
        readTime: "10分钟"
    },
    {
        id: 5,
        title: "Git 工作流指南",
        summary: "从基础到进阶，全面介绍 Git 版本控制系统的工作流程和团队协作最佳实践。",
        content: "Git 是现代软件开发中不可或缺的工具。本文将从基础命令开始，逐步介绍分支管理、合并策略、冲突解决等高级主题，帮助你建立高效的 Git 工作流。",
        image: "https://images.unsplash.com/photo-1516116216624-53e697fedbea?w=800&h=400&fit=crop",
        tags: ["Git", "版本控制", "开发工具"],
        date: "2024-01-05",
        readTime: "7分钟"
    },
    {
        id: 6,
        title: "Node.js 性能优化技巧",
        summary: "分享提升 Node.js 应用性能的实用技巧，包括代码优化、内存管理和缓存策略。",
        content: "Node.js 应用的性能优化是一个复杂的话题。本文将分享一些实用的优化技巧，包括异步处理、内存泄漏检测、数据库查询优化、缓存策略等，帮助你的应用获得更好的性能表现。",
        image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?w=800&h=400&fit=crop",
        tags: ["Node.js", "性能优化", "后端"],
        date: "2024-01-03",
        readTime: "9分钟"
    }
];

// 全局变量
let filteredArticles = [...articles];
let selectedTags = [];
let searchQuery = '';

// DOM 元素
const articlesContainer = document.getElementById('articlesContainer');
const tagsContainer = document.getElementById('tagsContainer');
const searchInput = document.getElementById('searchInput');
const noResults = document.getElementById('noResults');
const themeToggle = document.getElementById('themeToggle');

// 初始化
document.addEventListener('DOMContentLoaded', () => {
    initializeTheme();
    renderArticles();
    renderTags();
    setupEventListeners();
});

// 主题切换功能
function initializeTheme() {
    const savedTheme = localStorage.getItem('theme') || 'light';
    setTheme(savedTheme);
}

function setTheme(theme) {
    const html = document.documentElement;
    html.className = theme;
    localStorage.setItem('theme', theme);
    
    // 更新图标
    const sunIcon = themeToggle.querySelector('.fa-sun').parentElement;
    const moonIcon = themeToggle.querySelector('.fa-moon').parentElement;
    
    if (theme === 'dark') {
        sunIcon.classList.add('hidden');
        moonIcon.classList.remove('hidden');
    } else {
        sunIcon.classList.remove('hidden');
        moonIcon.classList.add('hidden');
    }
}

// 渲染文章列表
function renderArticles() {
    const articlesToShow = getFilteredArticles();
    
    if (articlesToShow.length === 0) {
        noResults.classList.remove('hidden');
        articlesContainer.innerHTML = '';
        return;
    }
    
    noResults.classList.add('hidden');
    
    const articlesHTML = articlesToShow.map(article => `
        <article class="article-card bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="${article.image}" 
                 alt="${article.title}" 
                 class="w-full h-48 object-cover">
            <div class="p-6">
                <div class="flex flex-wrap gap-2 mb-3">
                    ${article.tags.map(tag => `
                        <span class="px-2 py-1 text-xs bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 rounded">
                            ${tag}
                        </span>
                    `).join('')}
                </div>
                <h3 class="text-xl font-semibold mb-2 line-clamp-2">${highlightSearchTerm(article.title)}</h3>
                <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-3">
                    ${highlightSearchTerm(article.summary)}
                </p>
                <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
                    <span>${article.date}</span>
                    <span>${article.readTime}</span>
                </div>
            </div>
        </article>
    `).join('');
    
    articlesContainer.innerHTML = articlesHTML;
}

// 渲染标签
function renderTags() {
    const allTags = [...new Set(articles.flatMap(article => article.tags))];
    
    const tagsHTML = allTags.map(tag => `
        <button class="tag-button px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-full hover:bg-primary-500 hover:text-white transition-colors"
                data-tag="${tag}">
            ${tag}
        </button>
    `).join('');
    
    tagsContainer.innerHTML = tagsHTML;
}

// 获取过滤后的文章
function getFilteredArticles() {
    let filtered = articles;
    
    // 按标签过滤
    if (selectedTags.length > 0) {
        filtered = filtered.filter(article => 
            selectedTags.some(tag => article.tags.includes(tag))
        );
    }
    
    // 按搜索词过滤
    if (searchQuery.trim()) {
        const query = searchQuery.toLowerCase();
        filtered = filtered.filter(article => 
            article.title.toLowerCase().includes(query) || 
            article.summary.toLowerCase().includes(query)
        );
    }
    
    return filtered;
}

// 高亮搜索词
function highlightSearchTerm(text) {
    if (!searchQuery.trim()) return text;
    
    const regex = new RegExp(`(${searchQuery})`, 'gi');
    return text.replace(regex, '<span class="highlight">$1</span>');
}

// 设置事件监听器
function setupEventListeners() {
    // 主题切换
    themeToggle.addEventListener('click', () => {
        const currentTheme = document.documentElement.className;
        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
        setTheme(newTheme);
    });
    
    // 搜索功能
    searchInput.addEventListener('input', (e) => {
        searchQuery = e.target.value;
        renderArticles();
    });
    
    // 标签筛选
    tagsContainer.addEventListener('click', (e) => {
        if (e.target.classList.contains('tag-button')) {
            const tag = e.target.dataset.tag;
            toggleTag(tag, e.target);
        }
    });
}

// 切换标签选择状态
function toggleTag(tag, button) {
    const index = selectedTags.indexOf(tag);
    
    if (index > -1) {
        selectedTags.splice(index, 1);
        button.classList.remove('active', 'bg-primary-500', 'text-white');
        button.classList.add('border-gray-300', 'dark:border-gray-600');
    } else {
        selectedTags.push(tag);
        button.classList.add('active', 'bg-primary-500', 'text-white');
        button.classList.remove('border-gray-300', 'dark:border-gray-600');
    }
    
    renderArticles();
}

// 工具函数：防抖
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// 添加行数限制样式（用于文章摘要）
const style = document.createElement('style');
style.textContent = `
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
`;
document.head.appendChild(style);